<template>
  <el-form-item :label="label">
    <el-checkbox-group
      :model-value="modelValue"
      @update:model-value="$emit('update:modelValue', $event)"
    >
      <el-checkbox
        v-for="item in options"
        :key="item.value"
        :label="item.value"
      >
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue'

interface Option {
  label: string
  value: string | number
}

const props = defineProps({
  label: { type: String, default: '多选框' },
  options: { type: Array as PropType<Option[]>, default: () => [] },
  modelValue: { type: Array as PropType<(string | number)[]>, default: () => [] }
})

const emit = defineEmits(['update:modelValue'])

const updateValue = (value: Array<string | number>) => {
  emit('update:modelValue', value)
}
</script> 